<template>
  <div class="container">
    <div>监控状况</div>
    <!-- 卡片 -->
    <div class="top-area">
      <div class="top-card back-one">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-one.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">设备总数</div>
          <div class="top-value">{{ deviceInfo.all }}</div>
        </div>
      </div>
      <div class="top-card back-two">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-two.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">运行设备</div>
          <div class="top-value" style="color: #00FFD7;">{{ deviceInfo.run }}</div>
        </div>
      </div>
      <div class="top-card back-three">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-three.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">告警设备</div>
          <div class="top-value" style="color: #E5885D;">{{ deviceInfo.fault }}</div>
        </div>
      </div>
      <div class="top-card back-four">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-four.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">离线设备</div>
          <div class="top-value" style="color: #FFD342;">{{ deviceInfo.offline }}</div>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div style="width: 100%;height: 35%; display: flex;align-items: center;margin-top: 20px;">
      <div class="echart-card">
        <div style="height: 100%; display: flex;flex-direction: column; justify-content: space-between;">
          <div style="height: 5%;" class="flex-div">
            <div>告警情况分析</div>
            <div style="display: flex;align-items: center;">
              <div :class="alarmEchartType == 1 ? 'monitoring-btn-active' : 'btn-common'" @click="choseEchartTime(1)">24H</div>
              <div :class="alarmEchartType == 2 ? 'monitoring-btn-active' : 'btn-common'" @click="choseEchartTime(2)"
                style="margin-left: 20px;">当月</div>
              <div :class="alarmEchartType == 3 ? 'monitoring-btn-active' : 'btn-common'" @click="choseEchartTime(3)"
                style="margin-left: 20px;">当年</div>
            </div>
          </div>
          <div style="height: 95%;width: 100%;"> <EchartsView ref="chart1" height="95%"></EchartsView></div>
         
        </div>
      </div>
      <div class="echart-card" style="margin-left: 20px;">
        <div style="height: 100%; display: flex;flex-direction: column; justify-content: space-between;">
          <div style="height: 5%;" class="flex-div">
            <div>告警情况分析</div>
            <div style="color: #326CBD;">
              更多
            </div>
          </div>
          <div style="display: flex;align-items: center;margin-top: 20px;">
            <div :class="tableType == 'DEVICE_ALARM' ? 'monitoring-btn-active' : 'btn-common'"
              @click="choseTableType('DEVICE_ALARM')">设备告警</div>
            <div :class="tableType == 'UPLODAD_FAULT' ? 'monitoring-btn-active' : 'btn-common'"
              @click="choseTableType('UPLODAD_FAULT')" style="margin-left: 20px;">故障上报</div>
          </div>
          <el-table height="350" stripe v-loading="isTableLoading" :data="tableData" style="margin-top: 20px;">
            <el-table-column align="center" label="发生时间" prop="createdAt"></el-table-column>
            <el-table-column align="center" prop="deviceCode" label="设备编码">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.deviceCode" placement="top">
                  <div class="over">{{ scope.row.deviceCode }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="deviceName" label="告警设备">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.deviceName" placement="top">
                  <div class="over">{{ scope.row.deviceName }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="deviceAddress" label="设备位置">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.deviceAddress" placement="top">
                  <div class="over">{{ scope.row.deviceAddress }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="告警内容"></el-table-column>
            <el-table-column align="center" prop="handledStatus" label="处理状态"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px; width: 100%;height: 35%; display: flex;align-items: center;margin-top: 20px;">
      <div class="echart-card">
        <div style="height: 100%; display: flex;flex-direction: column; justify-content: space-between;">
          <div style="height: 5%;" class="flex-div">
            <div>全年数据分析</div>

            <div style="display: flex;align-items: center;">
              <div :class="alarmPieType == 1 ? 'monitoring-btn-active' : 'btn-common'" @click="chosePieTime(1)">24H</div>
              <div :class="alarmPieType == 2 ? 'monitoring-btn-active' : 'btn-common'" @click="chosePieTime(2)"
                style="margin-left: 20px;">当月</div>
              <div :class="alarmPieType == 3 ? 'monitoring-btn-active' : 'btn-common'" @click="chosePieTime(3)"
                style="margin-left: 20px;">当年</div>
            </div>
          </div>
          <EchartsView ref="chart2" height="95%"></EchartsView>
        </div>
      </div>
      <div class="echart-card" style="margin-left: 20px;">
        <div style="height: 5%;" class="flex-div">
          <div>全年设备数据分析</div>

          <div style="display: flex;align-items: center;">
              <div :class="alarmYearType == 1 ? 'monitoring-btn-active' : 'btn-common'" @click="choseYearTime(1)">24H</div>
              <div :class="alarmYearType == 2 ? 'monitoring-btn-active' : 'btn-common'" @click="choseYearTime(2)"
                style="margin-left: 20px;">当月</div>
              <div :class="alarmYearType == 3 ? 'monitoring-btn-active' : 'btn-common'" @click="choseYearTime(3)"
                style="margin-left: 20px;">当年</div>
            </div>
        </div>
        <EchartsView ref="chart3" height="95%"></EchartsView>
      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">


.top-area {
  margin-top: 20px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.top-card {
  width: calc((100% - 60px) / 4);
  height: 120px;
  display: flex;
  align-items: center;
  // background-color: #0A1E3E;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}

.back-one {
  background-image: url('../../assets/images/shishi/back-one.png');

}

.back-two {
  background-image: url('../../assets/images/shishi/back-two.png');
}

.back-three {
  background-image: url('../../assets/images/shishi/back-three.png');
}

.back-four {
  background-image: url('../../assets/images/shishi/back-four.png');
}

.top-text {
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.top-title {
  font-weight: 400;
  font-size: 14px;
}

.top-value {
  font-weight: bold;
  font-size: 28px;
}

.echart-card {
  height: 100%;
  flex: 1;
  background-color: var(--primary-table-bg-color);
  padding: 20px;
  overflow: hidden;
}

.flex-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.monitoring-btn-active {
  cursor: pointer;
 min-width: 75px;
  height: 32px;
  padding: 0 15px!important;
  display: inline-block;
  background: var(--primary-color);
  border-radius: 16px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
}

.btn-common {
  cursor: pointer;
  min-width: 75px;
  padding: 0 15px !important;
  height: 32px;
  background: var(--primary-table-bg-color);
  border-radius: 16px;
  border: 1px solid #3564A9;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #3564A9;
}

// 超出显示省略号
.over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<script src="./index.js"></script>